import React, { Component,useEffect } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Backdrop, Container, Typography, Paper, Snackbar, TextField } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import MuiAlert from '@material-ui/lab/Alert';
import AddIcon from '@material-ui/icons/Add';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import GamesIcon from '@material-ui/icons/Games';
import Bubble from '../common/Bubble';


@inject("baseStore")
@observer
class Game extends Component {
    constructor(props) {
        super(props);
        this.state = {
            message: "",
            sendWidth: 0,
            display: "none",
            textWidth: "100%",
            ready:"准备"
        }
    }

    componentDidMount = () => {
        if (!this.props.baseStore.status) {
            this.props.history.push({
                pathname: "/",
                state: this.props.location.pathname
            });
        }
        
          
    }

    /**
     * 让滚动区域永远保持最新
     */
    componentDidUpdate = () => {
        const content = document.getElementById('scroll-content');
        content.scrollTop = content.scrollHeight;  
    }

    render() {
        return (
            <div style={{ margin: 0, padding: 0, border: 0 }}>
                <Container fixed width="lg" style={{ height: "calc(100vh - 200px)", padding: 0 }}>
                    <Typography style={{ marginTop: "30px", marginLeft: 10 }} variant="h5" component="h3" gutterBottom>
                        房间号 : {this.props.baseStore.room.roomId == undefined ? "" : this.props.baseStore.room.roomId}
                    </Typography>
                    <Paper style={{ padding: 0, margin: 0, height: "calc(100% - 40px)", position: "relative" }}>
                        <div id="scroll-content" style={{ padding: 0, margin: 0, height: "calc(100% - 58px)", overflowY: "auto", borderBottomWidth: 0 }}>
                            {
                                this.props.baseStore.message.map((msg) => {
                                    if (msg.type === "system") {
                                        return <Alert style={{ margin: 10 }} severity="info">{msg.msg}</Alert>
                                    } else if (msg.type === "my") {
                                        return <Bubble text={msg.msg} me={true} />
                                    } else if(msg.type === "theirs") {
                                        return <Bubble text={msg.msg} sender={msg.sender} me={false} />
                                    }
                                })
                            }
                        </div>


                        <TextField
                            style={{ position: "absolute", left: 20, bottom: 20, margin: 10, width: this.state.textWidth, margin: -20, zIndex: 99 }}
                            variant="outlined"
                            multiline
                            value={this.state.message}
                            onChange={this.textChange}
                            maxRows={6}
                        />
                        <Button
                            onClick={this.send}
                            style={{ position: "absolute", left: "calc(100% - 44px)", bottom: 20, margin: 10, width: this.state.sendWidth, display: this.state.display, margin: -20, height: 58, padding: 0 }}
                            variant="contained"
                            color="primary"
                            size="small"
                        >
                            发送
                        </Button>
                    </Paper>

                    <Button
                        onClick={this.ready}
                        style={{ float: "left", margin: "10px", height: 40 ,width:120 }}
                        variant="contained"
                        color="primary"
                        size="large"
                    >
                        {this.state.ready}
                    </Button>
                    <Button
                        onClick={this.start}
                        style={{ float: "left", margin: "10px", height: 40,width:120 }}
                        variant="contained"
                        color="primary"
                        size="large"
                    >
                        开始游戏
                    </Button>
                </Container>

            </div>
        );
    }

    send = () => {
        let body = JSON.stringify({
            "type": "chat",
            "content": this.state.message
        })
        this.props.baseStore.sendMessage(body);
        let msg = {
            type: "my",
            "msg": this.state.message
        }
        this.props.baseStore.message.push(msg);
        this.setState({ message: "", sendWidth: 0, display: "none", textWidth: "100%" });
    }

    textChange = (e) => {
        this.setState({ message: e.target.value });
        if (e.target.value === "") {
            this.setState({ sendWidth: 0, display: "none", textWidth: "100%" });
        } else {
            this.setState({ sendWidth: 64, display: "", textWidth: "calc(100% - 64px)" });
        }
    }

    ready = () => {
        let body = JSON.stringify({ "type": "ready" })
        this.props.baseStore.sendMessage(body);
        if(this.state.ready === "准备"){
            this.setState({ready:"取消准备"})
        }else{
            this.setState({ready:"准备"})
        }
    }

    start = () => {
        let body = JSON.stringify({ "type": "start" })
        this.props.baseStore.sendMessage(body);
    }

}

export default Game;